<template>
  <div>
    <!-- 技术解释区域 -->
    <div style="background-color: #fff3e0; padding: 15px; margin-bottom: 20px; border-radius: 8px; border-left: 4px solid #FF9800;">
      <h3 style="color: #F57C00; margin-top: 0;">🔍 技术解释：缩放过渡动画</h3>
      <p><strong>Scale变换：</strong>使用CSS的 <code>transform: scale()</code> 来实现缩放效果，可以控制X轴和Y轴的缩放比例。</p>
      <p><strong>缩放原点：</strong>通过 <code>transform-origin</code> 属性控制缩放的中心点，可以是中心、角落或任意位置。</p>
      <p><strong>弹性效果：</strong>结合贝塞尔曲线可以创造弹性缩放效果，让动画更生动。</p>
      <p><strong>组合变换：</strong>可以将缩放与旋转、位移等变换组合使用，创造复杂的动画效果。</p>
    </div>

    <!-- 交互演示区域 -->
    <div style="background-color: #f5f5f5; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
      <h3>缩放过渡动画演示</h3>
      
      <!-- 控制面板 -->
      <div style="margin-bottom: 20px; padding: 15px; background-color: white; border-radius: 4px; border: 1px solid #ddd;">
        <div style="margin-bottom: 15px;">
          <button @click="toggleShow" style="padding: 10px 20px; background-color: #FF9800; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">
            {{ show ? '隐藏元素' : '显示元素' }}
          </button>
          <button @click="changeScaleType" style="padding: 10px 20px; background-color: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">
            类型: {{ scaleType }}
          </button>
          <button @click="changeOrigin" style="padding: 10px 20px; background-color: #9C27B0; color: white; border: none; border-radius: 4px; cursor: pointer;">
            原点: {{ origin }}
          </button>
        </div>
        
        <div style="margin-bottom: 10px;">
          <label style="display: inline-block; width: 120px;">过渡时长：</label>
          <input v-model.number="duration" type="range" min="200" max="2000" step="100" style="margin-right: 10px;">
          <span>{{ duration }}ms</span>
        </div>
        
        <div style="margin-bottom: 10px;">
          <label style="display: inline-block; width: 120px;">初始缩放：</label>
          <input v-model.number="initialScale" type="range" min="0" max="2" step="0.1" style="margin-right: 10px;">
          <span>{{ initialScale }}</span>
        </div>
        
        <div style="margin-bottom: 10px;">
          <label style="display: inline-block; width: 120px;">最终缩放：</label>
          <input v-model.number="finalScale" type="range" min="0.5" max="3" step="0.1" style="margin-right: 10px;">
          <span>{{ finalScale }}</span>
        </div>
        
        <div>
          <label style="display: inline-block; width: 120px;">缓动函数：</label>
          <select v-model="easing" style="padding: 5px; border: 1px solid #ddd; border-radius: 4px;">
            <option value="ease">ease</option>
            <option value="ease-in">ease-in</option>
            <option value="ease-out">ease-out</option>
            <option value="ease-in-out">ease-in-out</option>
            <option value="cubic-bezier(0.68, -0.55, 0.265, 1.55)">弹性效果</option>
            <option value="cubic-bezier(0.175, 0.885, 0.32, 1.275)">回弹效果</option>
          </select>
        </div>
      </div>

      <!-- 过渡效果展示 -->
      <div style="border: 1px solid #ddd; padding: 40px; border-radius: 4px; background-color: white; min-height: 300px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;">
        <Transition :name="transitionName" :duration="duration">
          <div v-if="show" class="demo-box" :style="boxStyle">
            <h4 style="margin: 0 0 10px 0; color: white;">缩放动画</h4>
            <p style="margin: 0; color: white;">类型: {{ scaleType }}</p>
            <p style="margin: 5px 0 0 0; font-size: 12px; color: rgba(255,255,255,0.8);">
              原点: {{ origin }}
            </p>
            <p style="margin: 5px 0 0 0; font-size: 12px; color: rgba(255,255,255,0.8);">
              {{ initialScale }} → {{ finalScale }}
            </p>
          </div>
        </Transition>
      </div>

      <!-- 多种缩放效果同时演示 -->
      <div style="margin-top: 20px;">
        <h4>多种缩放效果对比：</h4>
        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px;">
          <div v-for="(type, index) in scaleTypes" :key="type" 
               style="border: 1px solid #ddd; padding: 20px; border-radius: 4px; background-color: white; min-height: 150px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
            <Transition :name="`scale-${type}`" :duration="duration">
              <div v-if="showAll" :class="['mini-box', type]" :style="{ transformOrigin: origins[index % origins.length] }">
                {{ type }}
              </div>
            </Transition>
          </div>
        </div>
        
        <div style="text-align: center; margin-top: 15px;">
          <button @click="toggleAll" style="padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">
            {{ showAll ? '隐藏全部' : '显示全部' }}
          </button>
        </div>
      </div>

      <!-- 状态显示 -->
      <div style="margin-top: 15px; padding: 10px; background-color: #fff3e0; border-radius: 4px;">
        <strong>当前状态：</strong>
        <p>显示状态: {{ show ? '显示' : '隐藏' }} | 缩放类型: {{ scaleType }} | 变换原点: {{ origin }}</p>
        <p>过渡时长: {{ duration }}ms | 缓动函数: {{ easing }} | 缩放范围: {{ initialScale }} → {{ finalScale }}</p>
      </div>
    </div>

    <!-- 代码示例 -->
    <div style="background-color: #f8f8f8; padding: 15px; border-radius: 4px; margin-top: 20px;">
      <h4>代码示例：</h4>
      <pre style="background-color: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 4px; overflow-x: auto;"><code>&lt;template&gt;
  &lt;Transition name="scale-{{ scaleType }}"&gt;
    &lt;div v-if="show" class="demo-box"&gt;
      内容
    &lt;/div&gt;
  &lt;/Transition&gt;
&lt;/template&gt;

&lt;style&gt;
.scale-{{ scaleType }}-enter-active, .scale-{{ scaleType }}-leave-active {
  transition: all {{ duration }}ms {{ easing }};
  transform-origin: {{ origin }};
}
.scale-{{ scaleType }}-enter-from {
  transform: scale({{ initialScale }});
  opacity: 0;
}
.scale-{{ scaleType }}-leave-to {
  transform: scale({{ initialScale }});
  opacity: 0;
}
&lt;/style&gt;</code></pre>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GuoDu03',
  data() {
    return {
      show: true,
      showAll: true,
      scaleType: 'normal',
      origin: 'center',
      duration: 500,
      initialScale: 0,
      finalScale: 1,
      easing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
      scaleTypes: ['normal', 'x-only', 'y-only', 'bounce', 'elastic', 'zoom'],
      origins: ['center', 'top left', 'top right', 'bottom left', 'bottom right', 'top center']
    };
  },
  computed: {
    transitionName() {
      return `scale-${this.scaleType}`;
    },
    boxStyle() {
      return {
        background: this.getGradientByType(),
        transformOrigin: this.origin,
        transitionDuration: this.duration + 'ms',
        transitionTimingFunction: this.easing
      };
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
    toggleAll() {
      this.showAll = !this.showAll;
    },
    changeScaleType() {
      const currentIndex = this.scaleTypes.indexOf(this.scaleType);
      this.scaleType = this.scaleTypes[(currentIndex + 1) % this.scaleTypes.length];
    },
    changeOrigin() {
      const currentIndex = this.origins.indexOf(this.origin);
      this.origin = this.origins[(currentIndex + 1) % this.origins.length];
    },
    getGradientByType() {
      const gradients = {
        normal: 'linear-gradient(45deg, #FF9800, #FFC107)',
        'x-only': 'linear-gradient(45deg, #2196F3, #21CBF3)',
        'y-only': 'linear-gradient(45deg, #4CAF50, #8BC34A)',
        bounce: 'linear-gradient(45deg, #9C27B0, #E91E63)',
        elastic: 'linear-gradient(45deg, #FF5722, #FF9800)',
        zoom: 'linear-gradient(45deg, #607D8B, #90A4AE)'
      };
      return gradients[this.scaleType] || gradients.normal;
    }
  }
};
</script>

<style scoped>
.demo-box {
  width: 200px;
  height: 120px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  text-align: center;
}

.mini-box {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.mini-box.normal { background: linear-gradient(45deg, #FF9800, #FFC107); }
.mini-box.x-only { background: linear-gradient(45deg, #2196F3, #21CBF3); }
.mini-box.y-only { background: linear-gradient(45deg, #4CAF50, #8BC34A); }
.mini-box.bounce { background: linear-gradient(45deg, #9C27B0, #E91E63); }
.mini-box.elastic { background: linear-gradient(45deg, #FF5722, #FF9800); }
.mini-box.zoom { background: linear-gradient(45deg, #607D8B, #90A4AE); }

/* 普通缩放 */
.scale-normal-enter-active, .scale-normal-leave-active {
  transition: all v-bind(duration + 'ms') v-bind(easing);
  transform-origin: v-bind(origin);
}
.scale-normal-enter-from {
  transform: scale(v-bind(initialScale));
  opacity: 0;
}
.scale-normal-leave-to {
  transform: scale(v-bind(initialScale));
  opacity: 0;
}

/* X轴缩放 */
.scale-x-only-enter-active, .scale-x-only-leave-active {
  transition: all v-bind(duration + 'ms') v-bind(easing);
  transform-origin: center;
}
.scale-x-only-enter-from {
  transform: scaleX(0);
  opacity: 0;
}
.scale-x-only-leave-to {
  transform: scaleX(0);
  opacity: 0;
}

/* Y轴缩放 */
.scale-y-only-enter-active, .scale-y-only-leave-active {
  transition: all v-bind(duration + 'ms') v-bind(easing);
  transform-origin: center;
}
.scale-y-only-enter-from {
  transform: scaleY(0);
  opacity: 0;
}
.scale-y-only-leave-to {
  transform: scaleY(0);
  opacity: 0;
}

/* 弹跳效果 */
.scale-bounce-enter-active, .scale-bounce-leave-active {
  transition: all v-bind(duration + 'ms') cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center;
}
.scale-bounce-enter-from {
  transform: scale(0);
  opacity: 0;
}
.scale-bounce-leave-to {
  transform: scale(0);
  opacity: 0;
}

/* 弹性效果 */
.scale-elastic-enter-active, .scale-elastic-leave-active {
  transition: all v-bind(duration + 'ms') cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: center;
}
.scale-elastic-enter-from {
  transform: scale(0.3);
  opacity: 0;
}
.scale-elastic-leave-to {
  transform: scale(0.3);
  opacity: 0;
}

/* 缩放效果 */
.scale-zoom-enter-active, .scale-zoom-leave-active {
  transition: all v-bind(duration + 'ms') ease-in-out;
  transform-origin: center;
}
.scale-zoom-enter-from {
  transform: scale(1.5);
  opacity: 0;
}
.scale-zoom-leave-to {
  transform: scale(1.5);
  opacity: 0;
}
</style>